import React, { useState, useEffect } from "react";
// import ModalLoadPath from "../../ModalLoadPath";
import { invokeAPi, invokeAsyncAPi } from "@/xz-fn.js";
import { Button, Popover } from "antd";
import Dot from "@/media/sidebar/dot.png";
import DotActive from "@/media/sidebar/dot-active.png";
import "../index.css";
const noData = {};
const noFun = () => {};
const noList = [];
const App = ({
  modelInfo = noData,
  handleLoad = noFun,
  listItem = noData,
  installModelList = noList,
  getInstallModel = noFun,
}) => {
  const [loading, setLoading] = useState(false);
  const [showPopover, setShowPopover] = useState(false);
  //删除模型
  const remove = () => {
    setShowPopover(false);
    invokeAPi("xz_del_model_by_name", listItem?.content[0]?.model_id);
    let installModelList = JSON.parse(localStorage.getItem("installModelList"));
    installModelList = installModelList.filter(
      (item) => item !== listItem?.content[0]?.model_id
    );
    localStorage.setItem("installModelList", JSON.stringify(installModelList));
    getInstallModel();
  };

  //下载模型模型
  const downLoad = async () => {
    // if (loading) {
    //   showToast("warning", "当前正在下载中，请稍等...");
    //   return;
    // } else {
    //   showToast("info", "当前模型下载中...");
    // }
    //modelInfo储存了当前模型下载地址等信息
    const obj = {
      ...modelInfo,
      id: listItem.id,
      logo: listItem.logo,
      active: listItem.title,
      title: listItem?.title,
      size: listItem?.content[0]?.fileSize || "0",
      fileName: listItem?.content[0]?.fileName,
      signUrl: listItem?.content[0]?.url,
      loadProgress: "开始下载",
    };
    handleLoad(obj);
    setLoading(true);
  };

  // useEffect(() => {
  //   if (loading) {
  //     setLoading(false);
  //     showToast("success", "当前模型下载完成");
  //     return;
  //   } else {
  //     showToast("info", "当前模型下载中...");
  //   }
  //   getModelList();
  // }, [loading]);

  return (
    <>
      <div className="flex items-center">
        {listItem.loadProgress == "开始下载" &&
          !installModelList.includes(listItem?.content[0]?.model_id) && (
            <Button
              type="primary"
              shape="round"
              className="text-[14px] font-normal"
              loading={loading}
              onClick={downLoad}
            >
              下载
            </Button>
          )}
        <div>
          {installModelList.includes(listItem?.content[0]?.model_id) && (
            <div className="flex items-center">
              <Button type="primary" shape="round" disabled>
                已下载
              </Button>
              <Popover
                content={
                  <div onClick={remove} className="cursor-pointer">
                    删除
                  </div>
                }
                title=""
                trigger="click"
                placement="bottomRight"
                arrow={false}
                open={showPopover}
              >
                <div
                  className="flex items-center load-btn"
                  onClick={() => {
                    setShowPopover(true);
                  }}
                >
                  <img
                    src={Dot}
                    alt="Folder"
                    className="w-[16px] h-[16px] default-image"
                  />
                  <img
                    src={DotActive}
                    alt="Folder"
                    className="w-[16px] h-[16px] hover-image"
                  />
                </div>
              </Popover>
            </div>
          )}
        </div>
        {listItem.loadProgress != "开始下载" &&
          listItem.loadProgress != "已下载" &&
          !installModelList.includes(listItem?.content[0]?.model_id) && (
            <Button type="primary" shape="round" ghost>
              {listItem.loadProgress}
            </Button>
          )}
      </div>
      {/* {openLoadPath && (
        <ModalLoadPath
          openLoadPath={openLoadPath}
          hideLoadPath={() => hideLoadPath()}
          loadPathInfo={loadPathInfo}
          modelInfo={modelInfo}
          handleLoad={downLoad}
        />
      )} */}
    </>
  );
}

App.displayName = "Operation";

export default App;
